<template>
  <view class="home">
    <Nav nav-type="title" titleText="首页" />
    <view class="top_modlue">
      <image src="/static/images/topbimg.png" mode="" />
    </view>
    <view class="center_content">
      <view
        class="center-icon"
        @tap="goPage"
        :data-index="index"
        v-for="(item, index) in iconList"
        :key="index"
      >
        <view v-if="item.showRedbot" class="icon_num"></view>

        <view v-if="item.num" class="icon_num">{{ item.num }}</view>

        <view class="tetle">{{ item.title }}</view>

        <view class="cercle" :style="{ background: item.cercleColor }">
          <image
            v-if="item.iconSrc"
            :src="item.iconSrc"
            :style="{
              width: `${item.iconWidth}px`,
              height: `${item.iconHeight}px`,
              overflow: 'hidden',
            }"
          />
          <t-icon
            v-else
            :name="item.icon"
            :style="{
              fontSize: item.iconWidth + 'rpx',
              color: item.iconColor,
            }"
          />
        </view>
      </view>
    </view>
    <!-- <view class="home__content">
    <t-grid class="block" column="{{3}}">
      <t-grid-item wx:for="{{navList}}" wx:for-item="item" wx:key="index" text="{{item.name}}" icon="{{item.icon}}" jump-type="navigate-to" url="{{item.path}}" />
    </t-grid>
  </view> -->
  </view>
</template>

<script>
import Nav from "@/components/nav";
// 获取应用实例
// import { getMessageCount } from '../../api/message';
// import { getAlarmPositionList } from '../../api/alarm.js';
// import { getUnhandleCount } from '../../api/order.js';
const app = getApp();
const { navList } = app.globalData;
export default {
  components: {
    Nav,
  },
  // 生命周期
  data() {
    return {
      enable: false,

      // 发布
      userInfo: {},

      hasUserInfo: false,
      canIUse: uni.canIUse("button.open-type.getUserInfo"),
      canIUseGetUserProfile: false,
      canIUseOpenData:
        uni.canIUse("open-data.type.userAvatarUrl") &&
        uni.canIUse("open-data.type.userNickName"),

      // 如需尝试获取用户信息可改为false

      iconList: navList,

      title: "",
    };
  },
  onReady() {},
  onLoad(option) {
    if (uni.getUserProfile) {
      this.setData({
        canIUseGetUserProfile: true,
      });
    }
    if (option.release && option.release === "success") {
      this.showReleaseMsg();
    }
  },
  onShow() {},
  methods: {
    onRefresh() {
      console.log("刷新数据");
    },

    //跳转页面
    goPage(event) {
      const { iconList } = this;
      let index = Number(event.currentTarget.dataset.index);
      if (iconList[index].url) {
        uni.navigateTo({
          url: iconList[index].url,
        });
      } else {
        uni.showToast({
          title: "敬请期待",
          icon: "none",
        });
      }
    },
  },
};
</script>
<style lang="less">
@import "/variable.less";

@home-tab-item-height: 96rpx;

page {
  // height: 100vh;
  box-sizing: border-box;
  font-family: "PingFang SC", "Helvetica Neue", sans-serif;
}

.t-navbar {
  --td-navbar-bg-color: linear-gradient(to bottom right, #3769cd, #7eb7de);
}

.top_modlue {
  height: 30vh;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.top_modlue > image {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.center_content {
  position: relative;
  width: 630rpx;
  margin: 0 auto;
  margin-top: 6vh;
  /* height: calc(100vh - 540rpx); */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 30rpx;
  justify-items: center;
  align-items: center;
  justify-content: center;
  align-content: center;
}

.center-icon {
  box-sizing: border-box;
  /* float: left; */
  width: 100%;
  //   height: 100%;
  //   height: 200rpx;
  background: #ffffff;
  box-shadow: 0rpx 0rpx 19rpx 2rpx rgba(153, 153, 153, 0.1);
  border-radius: 38rpx;
  //   margin-right: 38rpx;
  padding: 58rpx;
  //   margin-top: 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.icon_num {
  position: absolute;
  right: -10rpx;
  top: -9rpx;
  min-width: 39rpx;
  height: 39rpx;
  padding: 0 4rpx;
  text-align: center;
  line-height: 39rpx;
  background-color: red;
  font-size: 24rpx;
  font-family:
    PingFang SC-Bold,
    PingFang SC;
  font-weight: bold;
  color: #ffffff;
  border-radius: 50%;
}

.center_content > .center-icon:nth-child(2n) {
  margin-right: 0 !important;
}

.tetle {
  text-align: center;
  font-size: 27rpx;
  font-family:
    PingFang SC-Bold,
    PingFang SC;
  font-weight: bold;
  color: #333333;
}

.cercle {
  width: 115rpx;
  height: 115rpx;
  border-radius: 50%;
  margin-top: 30rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.t-navbar {
  --td-navbar-padding-top: @navbar-padding-top;
  --td-navbar-height: calc(@nav-bar-height - @navbar-padding-top) !important;

  &__left {
    margin: 0;
  }
}

&__left {
  display: flex;
  align-items: center;
  padding: 0 16rpx;

  .t-search {
    --td-search-height: 64rpx;
    --td-search-font-size: @font-size-mini;
    width: 375rpx;

    .t-icon {
      font-size: @font-size-default !important;
    }
  }
}

.home {
  background-color: @bg-color;
  height: calc(100vh - @tab-bar-height);
  overflow: auto;

  &__content {
    height: calc(100% - @nav-bar-height);
    overflow: hidden;
  }

  .t-tabs {
    --td-tab-item-tag-height: @home-tab-item-height;
    --td-tab-font-size: @font-size-small;
    width: 100%;
    height: 100%;

    &__content {
      height: calc(100% - @home-tab-item-height);
      overflow: auto;
      background-color: @bg-color;
    }
  }

  &__card-list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24rpx 12rpx;
    padding: 24rpx;
    background-color: @bg-color;
  }
}

.usermotto {
  margin-top: 200px;
}

.home-release {
  position: fixed;
  bottom: 208rpx;
  right: 32rpx;

  .relese-button {
    width: 200rpx;
  }
}

.block {
  display: block;
  margin-bottom: 32rpx;
}
</style>
